<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录 - 斗地主</title>
    <link rel="stylesheet" th:href="@{/js/lib/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/js/lib/fontawesome/css/all.min.css}">
    <style>
        body {
            background: #f8f9fa;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
        }

        .login-container {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            margin: auto;
        }

        .form-control {
            border-radius: 10px;
            padding: 12px 15px;
            height: auto;
            font-size: 16px;
        }

        .btn {
            border-radius: 10px;
            padding: 12px 15px;
            font-size: 16px;
            height: auto;
        }

        .toggle-form {
            cursor: pointer;
            color: #007bff;
            -webkit-tap-highlight-color: transparent;
        }

        .toggle-form:hover {
            text-decoration: underline;
        }

        .form-floating {
            margin-bottom: 1rem;
        }

        .form-floating > label {
            padding: 12px 15px;
        }

        .game-title {
            text-align: center;
            margin-bottom: 2rem;
            color: #333;
        }

        .game-title i {
            font-size: 3rem;
            color: #007bff;
            margin-bottom: 1rem;
        }

        @media (max-width: 576px) {
            body {
                padding: 10px;
                background: white;
            }

            .login-container {
                box-shadow: none;
                padding: 1.5rem;
            }

            .game-title i {
                font-size: 2.5rem;
            }

            .game-title h2 {
                font-size: 1.5rem;
            }

            .toggle-form {
                padding: 10px;
                display: inline-block;
            }

            .form-floating {
                margin-bottom: 1.2rem;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        #loginForm, #registerForm {
            animation: fadeIn 0.3s ease-out;
        }

        .form-control:focus {
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }

        .btn:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body>
<div class="login-container">
    <!-- 登录表单 -->
    <div id="loginForm">
        <div class="game-title">
            <i class="fas fa-gamepad d-block"></i>
            <h2>斗地主</h2>
        </div>
        <form>
            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="loginUsername" placeholder="用户名">
                <label for="loginUsername">用户名</label>
            </div>
            <div class="form-floating mb-3">
                <input type="password" class="form-control" id="loginPassword" placeholder="密码">
                <label for="loginPassword">密码</label>
            </div>
            <button type="button" class="btn btn-primary w-100 mb-3" id="loginBtn">登录</button>
            <p class="text-center mb-0">
                还没有账号？
                <span class="toggle-form" onclick="toggleForm('register')">立即注册</span>
            </p>
        </form>
    </div>

    <!-- 注册表单 -->
    <div id="registerForm" style="display: none;">
        <div class="game-title">
            <i class="fas fa-user-plus d-block"></i>
            <h2>注册账号</h2>
        </div>
        <form>
            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="registerUsername" placeholder="用户名">
                <label for="registerUsername">用户名</label>
            </div>
            <div class="form-floating mb-3">
                <input type="password" class="form-control" id="registerPassword" placeholder="密码">
                <label for="registerPassword">密码</label>
            </div>
            <div class="form-floating mb-3">
                <input type="password" class="form-control" id="confirmPassword" placeholder="确认密码">
                <label for="confirmPassword">确认密码</label>
            </div>
            <button type="button" class="btn btn-primary w-100 mb-3" id="registerBtn">注册</button>
            <p class="text-center mb-0">
                已有账号？
                <span class="toggle-form" onclick="toggleForm('login')">返回登录</span>
            </p>
        </form>
    </div>
</div>

<script th:src="@{/js/lib/jquery.min.js}"></script>
<script th:src="@{/js/lib/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script>
    function toggleForm(type) {
        if (type === 'register') {
            $('#loginForm').hide();
            $('#registerForm').show();
        } else {
            $('#registerForm').hide();
            $('#loginForm').show();
        }
    }

    $(document).ready(function () {
        // 登录按钮点击事件
        $('#loginBtn').click(function () {
            const username = $('#loginUsername').val();
            const password = $('#loginPassword').val();

            if (!username || !password) {
                MessageUI.showMessage('请输入用户名和密码', 'warning');
                return;
            }

            $.ajax({
                url: '/api/players/login',
                method: 'POST',
                data: {
                    username: username,
                    password: password
                },
                success: function (player) {
                    localStorage.setItem('player', JSON.stringify(player));
                    MessageUI.showMessage('登录成功！', 'success');
                    setTimeout(() => {
                        window.location.href = '/';
                    }, 1000);
                },
                error: function (error) {
                    ErrorHandler.handleError(error, '登录失败');
                }
            });
        });

        // 注册按钮点击事件
        $('#registerBtn').click(function () {
            const username = $('#registerUsername').val();
            const password = $('#registerPassword').val();
            const confirmPassword = $('#confirmPassword').val();

            if (!username || !password || !confirmPassword) {
                MessageUI.showMessage('请填写所有必填项', 'warning');
                return;
            }

            if (password !== confirmPassword) {
                MessageUI.showMessage('两次输入的密码不一', 'warning');
                return;
            }

            $.ajax({
                url: '/api/players/register',
                method: 'POST',
                data: {
                    username: username,
                    password: password
                },
                success: function (response) {
                    MessageUI.showMessage('注册成功！请登录', 'success');
                    toggleForm('login');
                    $('#loginUsername').val(username);
                },
                error: function (error) {
                    ErrorHandler.handleError(error, '注册失败');
                }
            });
        });

        // 回车键提交
        $('#loginForm input').keypress(function (e) {
            if (e.which === 13) {
                $('#loginBtn').click();
            }
        });

        $('#registerForm input').keypress(function (e) {
            if (e.which === 13) {
                $('#registerBtn').click();
            }
        });
    });
</script>
</body>
</html> 